<template>
	<div class="Spring">
		<h3 class="title">各地出行政策</h3>
		<div>
			<Cascader :options="options" label="出发城市" @onValue="getgoCity" />
			<Cascader :options="options" label="到达城市" @onValue="gettoCity" />
			<van-Button type="info" block @click="policeclick">查看政策</van-Button>
		</div>
	</div>

</template>

<script>
	import api from "../api";
	import Cascader from "../components/cascader.vue";
	import merge from "webpack-merge";
	export default {
		data() {
			return {
				options: [],
				gocitys: "",
				tocitys: "",
				citys: [],
				show: false,
			};
		},
		components: {
			Cascader
		},
		mounted() {
			api.getjuheCityListData().then(res => {
				console.log(res);
				this.options = res.data.result;
			}).catch(error => {
				console.log(error);
			})
		},
		methods: {
			getgoCity(data) {
				this.gocitys = data;
			},
			gettoCity(data) {
				this.tocitys = data;
			},
			policeclick() {
				if (this.gocitys == "") {
					//请选择城市
					this.$dialog.alert({
						message: '请选择出发城市',
					});
				} else if (this.tocitys == "") {
					//请选择城市
					this.$dialog.alert({
						message: '请选择到达城市',
					});
				} else if (this.tocitys.value == this.gocitys.value) {
					//请选择城市
					this.$dialog.alert({
						message: '请选择不同城市',
					});
				} else {
					this.citys.push(this.gocitys);
					this.citys.push(this.tocitys);
					this.$router.push({
						name: "Policy",
						query: merge(this.$route.query, {
							citys: this.citys,
							reloadTime: +new Date()
						})
					});
					this.gocitys = "";
					this.tocitys = "";
					console.log(this.$route)
				}
			}
		}
	};
</script>

<style scoped>
	.Spring {
		width: 100%;
		height: 1.8rem;
		background-color: #fff;
		padding: .1rem;
		box-sizing: border-box;
	}

	.Spring .title {
		font-size: 0.16rem;
		margin: 0 0 0.08rem 0.16rem;
	}
</style>
